<template>
    <div class="header">
        <header-back-icon :backIconShow="backIconShow"></header-back-icon>
        <header-logo></header-logo>
        <header-list-icon :listIconShow="listIconShow"></header-list-icon>
    </div>
</template>

<script>
import HeaderBackIcon from './BackIcon';
import HeaderLogo from './Logo';
import HeaderListIcon from './ListIcon';

export default {
    name: 'Header',
    props: {
        backIconShow: {
            type: Boolean,
            default () {
                return false;
            }
        },
        listIconShow: {
            type: Boolean,
            default () {
                return true;
            }
        }
    },
    
    components: {
        HeaderBackIcon,
        HeaderLogo,
        HeaderListIcon
        
    }
}
</script>

<style lang="scss" scoped>
  .header {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      height: .44rem;
      background-color: #fff;
      border-bottom: 1px solid #ddd;
  }

</style>